<script setup lang="ts">
// 编辑视频弹窗
import { computed, ref, watch } from 'vue';
import { useDialog } from 'naive-ui';
import { localStg } from '@/utils/storage';
import { msgCheckAction } from '@/service/api';

interface Props {
  show: boolean;
  direction?: string;
}

interface FormData {
  name: string;
}

const formData = ref<FormData>({
  name: ''
});

const props = withDefaults(defineProps<Props>(), {
  show: false,
  direction: ''
});

const emit = defineEmits(['update:show', 'saveTips']);

const modalShowValue = computed({
  get() {
    return props.show;
  },
  set(value: boolean) {
    emit('update:show', value);
  }
});

watch(
  () => props.show,
  value => {
    if (value) {
      formData.value.name = props.direction;
    }
  }
);

// 取消
function closeModal() {
  modalShowValue.value = false;
}

const dialog = useDialog();

// 确认
async function submitClick() {
  const checkParams: any = {
    moduleValue: localStg.get('moduleId') || 1,
    keyword: formData.value.name
  };

  const { data: checkData, error: checkError } = await msgCheckAction(checkParams);
  if (!checkError) {
    if (checkData && checkData.length > 0) {
      dialog.error({
        title: '温馨提示',
        content: `编写方向中包含以下敏感词：\n${checkData.join('，')}`,
        style: 'white-space: pre-line;',
        positiveText: '确认'
      });
      return;
    }
  }

  emit('saveTips', formData.value.name);
  closeModal();
}
</script>

<template>
  <NModal
    v-model:show="modalShowValue"
    preset="card"
    title="请输入编写方向"
    class="w-640px"
    :mask-closable="false"
    @close="closeModal"
  >
    <NForm :model="formData" label-placement="left" label-width="auto">
      <NFormItem path="name">
        <NInput
          v-model:value="formData.name"
          type="textarea"
          :maxlength="100"
          placeholder="请输入"
          clearable
          show-count
        />
      </NFormItem>
    </NForm>
    <template #footer>
      <NSpace class="w-full" :size="24" justify="end">
        <NButton class="w-72px" @click="closeModal">取消</NButton>
        <NButton class="w-72px" type="primary" @click="submitClick">确定</NButton>
      </NSpace>
    </template>
  </NModal>
</template>

<style scoped></style>
